<template>
  <div class="top-header-container" :style="backgroundColor">
    <div class="top-nav">
      <header class="top-header" v-text="siteInfo.siteName"></header>
      <div class="nav-list">
        <router-link
          to="/"
          exact
          active-class="nav-actived"
          class="header-nav-link"
          ><a-icon type="home" />主页</router-link
        >

        <span class="header-nav-link" @click="createProject = true">
          <a-icon type="folder-add" />
          创建项目
        </span>

        <router-link
          to="/user"
          exact
          v-if="userInfo.superAdmin"
          active-class="nav-actived"
          class="header-nav-link"
          ><a-icon type="usergroup-delete" /> 用户管理
        </router-link>

        <span
          class="header-nav-link"
          v-if="userInfo.superAdmin"
          @click="updateSiteInfo = true"
        >
          <a-icon type="setting" />
          系统配置
        </span>
        
        <router-link
          to="/help"
          exact
          active-class="nav-actived"
          class="header-nav-link"
          ><a-icon type="read" /> 帮助
        </router-link>

        <!-- 创建弹框 -->
        <create-dialog
          v-if="createProject"
          v-model="createProject"
          @change="$bus.$emit('refreshProtoList')"
        />

        <update-site-info v-if="updateSiteInfo" v-model="updateSiteInfo" />
      </div>
    </div>

    <div class="right-menu-container">
      <span class="header-nav-link" style="margin-right: 20px">
        <a-input
          @keydown.enter="handleSubmit"
          @change="handleSubmit"
          v-model="formData.name"
          :disabled="$route.path != '/'"
          placeholder="请输入项目名称"
        />
      </span>

      <!-- 主题选择 -->
      <choose-theme />

      <!-- 全屏 -->
      <full-screen />

      <!-- 用户信息 -->
      <user-info />

      <!-- 退出 -->
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>退出</span>
        </template>
        <div class="menu-item">
          <a-icon type="logout" @click="userLogout" class="icon" />
        </div>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
import { logout } from "@/api/user.js";
import { mapActions, mapGetters } from "vuex";
import ChooseTheme from "@/components/ChooseTheme";
import FullScreen from "@/components/FullScreen";
import UserInfo from "@/components/UserInfo";
import CreateDialog from "./components/createProjectDialog.vue";
import { getPrototypeList } from "@/api/prototype";
import UpdateSiteInfo from "./components/updateSiteInfo.vue";

export default {
  data() {
    return {
      createProject: false,
      updateSiteInfo: false,
      updatePassWord: false,
      formData: {
        name: ""
      }
    };
  },
  methods: {
    ...mapActions({
      logout: "global/logout",
      setList: "proto/setList"
    }),
    async userLogout() {
      try {
        const { code, msg } = await logout();
        if (code === 200) {
          await this.logout();
          this.setList([]);
          this.$notification.success({
            message: msg
          });
          this.$router.push("/login");
        }
      } catch (error) {}
    },
    handleSubmit() {
      this.getPrototypeList(0, this.formData.name);
      this.getPrototypeList(1, this.formData.name);
    },
    async getPrototypeList(type, name) {
      try {
        const { code, data } = await getPrototypeList({
          name,
          type
        });
        if (code == 200) {
          const setType = type == 0 ? "otherProjectList" : "myProjectList";
          this.setList({
            type: setType,
            list: data
          });
        }
      } catch (error) {}
    }
  },
  components: {
    FullScreen,
    ChooseTheme,
    UserInfo,
    CreateDialog,
    UpdateSiteInfo
  },
  computed: {
    ...mapGetters(["userInfo", "siteInfo"])
  }
};
</script>

<style lang="scss">
.menu-item {
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  &:hover {
    cursor: pointer;
    background: rgba(#fff, 0.3);
  }
  .icon {
    display: block;
    font-size: 20px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

<style lang="scss" scoped>
.top-header-container {
  height: 50px;
  padding: 0 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 50px;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 8;
  .top-header {
    font-size: 22px;
  }
  .top-nav {
    display: flex;
    align-items: center;
    .nav-list {
      margin-left: 50px;
      display: flex;
      align-items: center;
      .header-nav-link {
        color: #fff;
        padding: 0 20px;
        cursor: pointer;
        &:hover {
          background: rgba(#fff, 0.3);
        }
      }

      .nav-actived {
        height: 100%;
        background: rgba(#fff, 0.3);
      }
    }
  }

  .right-menu-container {
    display: flex;
    align-items: center;
  }
}
</style>
